<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue" leftText="ph-fanhui">
			<block slot="content">生产概要/统计数据</block>
			<!-- <template slot="right">
				<text class=""></text>
			</template> -->
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<!-- 主题内容 -->
		<view  class="padding-t">
			<view class="">
				<view class="u-main">
					<view class="u-main-title">
						产量趋势图
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info">
						<view class="mass-echarts">
							<u-charts
							 :legend="monterPrarm1.legend"
							 :canvas-id="monterPrarm1.id" 
							 :chartType="monterPrarm1.chartType" 
							 :cWidth="monterPrarm1.radarWidth" 
							 :cHeight="monterPrarm1.radarHeight" 
							 :opts="monterPrarm1.opts"
							 :xAxis="monterPrarm1.xAxis"
							 :ref="monterPrarm1.id" />
						</view>
					</view>
				</view>
				<!-- 轧制块数趋势图 -->
				<view class="u-main">
					<view class="u-main-title">
						轧制块数趋势图
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info">
						<view class="mass-echarts">
							<u-charts
							 :legend="blockNums.legend"
							 :canvas-id="blockNums.id" 
							 :chartType="blockNums.chartType" 
							 :cWidth="blockNums.radarWidth" 
							 :cHeight="blockNums.radarHeight" 
							 :opts="blockNums.opts"
							 :xAxis="blockNums.xAxis"
							 :yAxis="blockNums.yAxis"
							 :ref="blockNums.id" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { post } from "@/lib/Util.js";
	import uCharts from '@/components/u-charts/component.vue';
	import {GET_PRODUCTION_DATA, GET_PRODUCTION_BLOCK} from '@/common/api/prodSum.js'
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				str: '',
				monterPrarm1: {
					legend: {
						data: ['轧制产量(t)'],
						position: 'top',
						float: 'right',
						fontColor: 'rgba(0,0,0,0.60)'
					},
					radarWidth: uni.upx2px(690),
					radarHeight: uni.upx2px(420),
					chartType: "column",
					extraType: "",
					id: "chanliang",
					xAxis: {
						disabled: false,
						disableGrid: false,
					},
					yAxis: {
						
					},
					opts: {
						categories: ['20', '40', '60', '80', '100', '120', '140', '160', '180'],
						series: [{
							name: '轧制产量(t)',
							data: [0,0, 0, 0, 0, 0]
						}]
					}
				},
				blockNums: {
					legend: {
						data: ['轧制块数'],
						position: 'top',
						float: 'right',
						fontColor: 'rgba(0,0,0,0.60)'
					},
					radarWidth: uni.upx2px(690),
					radarHeight: uni.upx2px(420),
					chartType: "column",
					extraType: "",
					id: "massWidth",
					xAxis: {
						disabled: false,
						disableGrid: false,
					},
					yAxis: {
						inverse: true,
					},
					opts: {
						categories: ['20', '40', '60', '80', '100', '120', '140', '160', '180'],
						series: [{
							name: '轧制块数',
							data: [0,0, 0, 0, 0, 0]
						}]
					}
				},
			}
		},
		onLoad(options) {
			this.str = options.param
		},
		onReady() {
			this.getInfo(this.str)
			this.getValInfo(this.str)
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getInfo(val) {
				let res = await post(GET_PRODUCTION_DATA, {timeFlag: val})
				if(res.code == 0 ) {
					var newArray = res.data.yieldList.map(function (index) {
					        return Number(index / 1000).toFixed(2)
					})
					this.monterPrarm1.opts.categories = res.data.dateList
					this.monterPrarm1.opts.series[0].data = newArray
					
				}
			},
			async getValInfo(val) {
				let res = await post(GET_PRODUCTION_BLOCK, {timeFlag: val})
				if(res.code == 0 ) {
					this.blockNums.opts.categories = res.data.dateList
					this.blockNums.opts.series[0].data = res.data.rollingList
					
				}
			}
		}
	}
</script>

<style>
	.mass-echarts {
		width: 690upx;
		height: 420upx;
	}
</style>
